<template>
  <tm-sheet
    v-if="tabsSwiper || (!tabsSwiper && isShowRender)"
    :transprent="props.transprent"
    :color="props.color"
    :followTheme="props.followTheme"
    :followDark="props.followDark"
    :dark="props.dark"
    :round="props.round"
    :shadow="props.shadow"
    :outlined="props.outlined"
    :border="props.border"
    :borderStyle="props.borderStyle"
    :borderDirection="props.borderDirection"
    :text="props.text"
    :linear="props.linear"
    :linearDeep="props.linearDeep"
    :_style="props._style"
    :_class="props._class"
    :eventPenetrationEnabled="true"
    :margin="[0, 0]"
    :padding="[0, 0]"
    :width="_width"
    :height="_height"
  >
    <view
      v-if="sc_top < -30 && reFresh != 0 && !tabsSwiperDisAbledPull"
      :style="{
        top: (reFresh == 2 ? -refreshJuli / 2 : -sc_top - 30) + 'px',
        width: _width + 'rpx',
      }"
      class="zIndex-17 absolute l-0 flex flex-row flex-row-center-center"
    >
      <view class="pr-32">
        <tm-icon
          v-if="sc_top > refreshJuli && reFresh != 2"
          name="tmicon-long-arrow-down"
        ></tm-icon>
        <tm-icon v-if="sc_top <= refreshJuli && reFresh != 2" name="tmicon-long-arrow-up"></tm-icon>
        <tm-icon v-if="reFresh == 2" spin name="tmicon-shuaxin"></tm-icon>
      </view>
      <view>
        <tm-text v-if="sc_top > refreshJuli" _class="text-align-center" label="下拉刷新"></tm-text>
        <tm-text
          v-if="sc_top <= refreshJuli"
          _class="text-align-center"
          label="松开立即刷新"
        ></tm-text>
        <tm-text _class="text-align-center" label="更新于今日8:30"></tm-text>
      </view>
    </view>
    <scroll-view
      @scrolltolower="onScrollBootom"
      @scroll="onScroll"
      :scroll-y="_height ? true : false"
      enable-flex
      class="flex-col"
      :style="[{ width: _width + 'rpx' }, _height ? { height: _height + 'rpx' } : '']"
    >
      <view
        @touchStart="onScrollStart"
        @touchend="onScrollEnd"
        v-if="isShowRender"
        :style="{ transform: `translateY(${reFresh == 2 ? -refreshJuli : 0}px)` }"
        class="flex contentx"
      >
        <slot></slot>
      </view>
    </scroll-view>
  </tm-sheet>
</template>

<script lang="ts" setup>
  /**
   * 选项卡面板
   * @description 不可以单独使用，必须放置在tm-tabs组件中使用。
   */
  import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue';
  import tmTabs from '@/tmui/components/tm-tabs/tm-tabs.vue';
  import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue';
  import tmText from '@/tmui/components/tm-text/tm-text.vue';
  import { tabsobj } from '@/tmui/components/tm-tabs/interface';
  import {
    Ref,
    ref,
    computed,
    watch,
    onUnmounted,
    inject,
    ComputedRef,
    getCurrentInstance,
    ComponentInternalInstance,
    PropType,
    onMounted,
  } from 'vue';
  import { custom_props } from '@/tmui/tool/lib/minxs';
  const tabs = ref<InstanceType<typeof tmTabs> | null>(null);
  const proxy = getCurrentInstance()?.proxy ?? null;
  const props = defineProps({
    ...custom_props,
    transprent: {
      type: [Boolean, String],
      default: false,
    },
    color: {
      type: String,
      default: 'white',
    },
    //是否显示红点，与count不能同时出现
    dot: {
      type: Boolean,
      default: false,
    },
    count: {
      type: [String, Number],
      default: '',
    },
    //红点颜色
    dotColor: {
      type: String,
      default: 'red',
    },
    name: {
      type: [String, Number],
      default: '',
      required: true,
    },
    title: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    pullFun: {
      type: [Function] as PropType<(type: 'top' | 'bottom') => boolean>,
      default: () => {
        return (type: 'top' | 'bottom') => {
          return true;
        };
      },
    },
  });

  //---scroll下拉刷新---------
  //0未初始化/松手可能未被触发，没有达到刷新的条件（即被中止了），1下拉手势中还未放开手。2松开手触发下拉刷新，3复位刷新完成
  type reFreshType = 0 | 1 | 2 | 3;
  const sc_top = ref(0);
  const refreshJuli = -100; //达到120才能被刷新
  const reFresh: Ref<reFreshType> = ref(0);
  const isyesResh = ref(false); //是否达到了规定刷新条件。
  const isUpToogle = ref(true); //手指是否放开。

  //---------------

  const _pname = computed(() => String(props.name));
  //父级方法。
  let parent: any = proxy?.$parent;
  while (parent) {
    if (parent?.tmTabsId == 'tmTabsId' || !parent) {
      break;
    } else {
      parent = parent?.$parent ?? null;
    }
  }

  if (typeof _pname.value != 'undefined' && _pname.value != '') {
    parent?.pushKey({
      key: _pname.value,
      title: props.title,
      icon: props.icon,
      dot: props.dot,
      count: props.count,
      dotColor: props.dotColor,
    });
  }

  const _width = inject(
    'tabsWidth',
    computed(() => 0)
  );
  const _height = inject(
    'tabsheight',
    computed(() => 0)
  );
  const tabsActiveName: ComputedRef<string | number | undefined> = inject(
    'tabsActiveName',
    computed(() => undefined)
  );
  const tabsActiveCacheTabse = inject(
    'tabsActiveCacheTabse',
    computed<Array<tabsobj>>(() => {
      return [];
    })
  );
  const tabsSwiper = inject(
    'tabsSwiper',
    computed(() => false)
  );
  const tabsSwiperIsMoveing = inject(
    'tabsSwiperIsMoveing',
    computed(() => false)
  );
  const tabsSwiperDisAbledPull = inject(
    'tabsSwiperDisAbledPull',
    computed(() => true)
  );

  const activeIndex = inject(
    'tabsActiveactiveIndex',
    computed(() => 0)
  );
  // const selfIndex = computed(()=>tabsActiveCacheTabse.value.findIndex(el=>el.key==tabsActiveName.value))
  const selfIndex = computed(() =>
    tabsActiveCacheTabse.value.findIndex((el) => el.key == _pname.value)
  );

  const isShowRender = computed(() => {
    if (tabsSwiper.value == false) {
      return selfIndex.value == activeIndex.value;
    }
    return selfIndex.value >= activeIndex.value - 1 && selfIndex.value <= activeIndex.value + 1;
  });

  watch(
    [() => props.title, () => props.icon, () => props.dot, () => props.dotColor, () => props.count],
    () => {
      parent?.setTitle({
        key: _pname.value,
        title: props.title,
        icon: props.icon,
        dot: props.dot,
        count: props.count,
        dotColor: props.dotColor,
      });
    }
  );
  onUnmounted(() => {
    parent?.unbindKey(_pname.value);
  });

  //=====
  function onScroll(e: any) {
    // 切换页面中不允许下拉。
    if (tabsSwiperIsMoveing.value) return;
    if (reFresh.value == 2 && isUpToogle.value) return;
    if (sc_top.value <= refreshJuli) {
      isyesResh.value = true;
    } else {
      isyesResh.value = false;
    }

    sc_top.value = e.detail.scrollTop;
    reFresh.value = 1;
  }
  function onScrollStart() {
    // 切换页面中不允许下拉。
    if (tabsSwiperIsMoveing.value) return;
    isUpToogle.value = false;
  }
  async function onScrollEnd() {
    // 切换页面中不允许下拉。
    if (tabsSwiperIsMoveing.value) return;
    isUpToogle.value = true;
    if (reFresh.value == 2) return;
    if (isyesResh.value) {
      let p = await funPull('top');
      if (p) {
        reFresh.value = 0;
      } else {
        isUpToogle.value = false;
      }
    } else {
      reFresh.value = 0;
    }
  }
  async function onScrollBootom() {
    // 切换页面中不允许下拉。
    if (tabsSwiperIsMoveing.value) return;
    isUpToogle.value = true;
    if (reFresh.value == 2) return;
    if (isyesResh.value) {
      let p = await funPull('bottom');
      if (p) {
        reFresh.value = 0;
      } else {
        isUpToogle.value = false;
      }
    } else {
      reFresh.value = 0;
    }
  }
  async function funPull(type: 'top' | 'bottom') {
    if (typeof props.pullFun === 'function') {
      uni.showLoading({
        title: '...',
        mask: true,
      });
      let p = await props.pullFun(type);
      if (typeof p === 'function') {
        p = await p(type);
      }
      uni.hideLoading();
      return p;
    }
  }
</script>

<style scoped>
  .contentx {
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transform: translateY(0px);
    transition-property: transform, top;
  }
</style>
